import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Tabs,Collapse,List,Row, Col } from 'antd';
import store from '../store/index'
import { postAxios } from '../api/axios'
import { API_getCarGroupAndStatus } from '../API'
const { TabPane } = Tabs;
const{Panel}=Collapse
function callback1(key) {
    console.log(key);
  }
  function callback2(key) {
    console.log(key);
  }
class Cartab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            carGroups:[],
            allCars:[],
            onlineCars:[],
            offlineCars:[],
            unuseCars:[]
        }
        store.subscribe(this.storeChange.bind(this)) //监听store数据更新时执行storeChange方法-订阅模式
    }
    showCarStatus(data){
        console.log('data',data)
        if(data.carStatus){
            if(data.carStatus.online){
                if(data.carStatus.speed>0){
                    return '运动'+data.carStatus.speed+'km/h'
                }else{
                    return '静止'+data.carStatus.staticTime
                }
            }else{
                return '离线'+data.carStatus.pointTime
            }
        }else{
            return '未用'
        }
        
    }
    storeChange(){
        let self=this;
        let {nowSelectUserId}=store.getState();//从store获取数据
        console.log(nowSelectUserId)
        let param={
            targetUserId:nowSelectUserId,
            mapType:1
        }
        // 请求车辆列表数据
        postAxios(API_getCarGroupAndStatus,param).then((res) => {
            console.log('车辆列表',res)
            if (res.data) {

                for(let item of res.data){
                    // self.state.carGroups.push({
                    //     carGroupId:item.carGroupId,
                    //     name:item.name?item.name:'默认分组'
                    // })
                }
                self.setState({
                    carGroups:res.data
                })
            }
        }, (error) => {
            console.log(error)
        })
    }
    render() {
        return (
                // this.state.carGroups.map((item,index)=>{
                //     return 1
                // })
            <Tabs defaultActiveKey="1" onChange={callback1} style={{height: document.documentElement.clientHeight-120,background:'#ccc'}}> 
                <TabPane tab="全部" key="1">
                    <Collapse defaultActiveKey={['1']} onChange={callback2} bordered={false} style={{height: document.documentElement.clientHeight-120,background:'#999',overflow:'scroll'}}>
                        {
                            this.state.carGroups.map((groupItem,index)=>{
                                
                                return (<Panel header={groupItem.name?groupItem.name:'默认分组'} key={index+1}>
                                        <List
                                            size="small"
                                            bordered={false}
                                            dataSource={groupItem.cars}
                                            renderItem={(carItem,carIndex) => (
                                                <List.Item>
                                                    <Row style={{width:'100%'}}>
                                                        <Col span={18}>{carItem.machineName}</Col>
                                                        <Col style={{textAlign:'right'}} span={6}>{this.showCarStatus(carItem)}</Col>
                                                    </Row>
                                                </List.Item>
                                            )}
                                        />
                                    </Panel>)
                            })
                        }
                    </Collapse>
                </TabPane>
                <TabPane tab="在线" key="2">
                    <Collapse defaultActiveKey={['1']} onChange={callback2} bordered={false}>
                        {
                            this.state.carGroups.map((groupItem,index)=>{
                                return (<Panel header={groupItem.name?groupItem.name:'默认分组'} key={index+1}>
                                        <List
                                            size="small"
                                            bordered={false}
                                            dataSource={groupItem.cars}
                                            renderItem={(carItem,carIndex) => (
                                                <List.Item>
                                                    <Row style={{width:'100%'}}>
                                                        <Col span={18}>{carItem.machineName}</Col>
                                                        <Col style={{textAlign:'right'}} span={6}>{this.showCarStatus(carItem)}</Col>
                                                    </Row>
                                                    </List.Item>
                                            )}
                                            />
                                    </Panel>)
                            })
                        }
                    </Collapse>
                </TabPane>
                <TabPane tab="离线" key="3">
                    <Collapse defaultActiveKey={['1']} onChange={callback2} bordered={false}>
                        {
                            this.state.carGroups.map((groupItem,index)=>{
                                
                                return (<Panel header={groupItem.name?groupItem.name:'默认分组'} key={index+1}>
                                        <List
                                            size="small"
                                            bordered={false}
                                            dataSource={groupItem.cars}
                                            renderItem={(carItem,carIndex) => (
                                                
                                                <List.Item>
                                                    <Row style={{width:'100%'}}>
                                                        <Col span={18}>{carItem.machineName}</Col>
                                                        <Col style={{textAlign:'right'}} span={6}>{this.showCarStatus(carItem)}</Col>
                                                    </Row>
                                                    </List.Item>
                                            )}
                                            />
                                    </Panel>)
                            })
                        }
                    </Collapse>
                </TabPane>
                <TabPane tab="未用" key="4">
                    <Collapse defaultActiveKey={['1']} onChange={callback2} bordered={false}>
                        {
                            this.state.carGroups.map((groupItem,index)=>{
                                return (<Panel header={groupItem.name?groupItem.name:'默认分组'} key={index+1}>
                                        <List
                                            size="small"
                                            bordered={false}
                                            dataSource={groupItem.cars}
                                            renderItem={(carItem,carIndex) => (
                                                <List.Item>
                                                    <Row style={{width:'100%'}}>
                                                        <Col span={18}>{carItem.machineName}</Col>
                                                        <Col style={{textAlign:'right'}} span={6}>{this.showCarStatus(carItem)}</Col>
                                                    </Row>
                                                    </List.Item>
                                            )}
                                            />
                                    </Panel>)
                            })
                        }
                    </Collapse>
                </TabPane>
            </Tabs>

        );
    }
}
export default Cartab;